<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>商品规格</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    
    <style type="text/css">
        body {
            font-size: 14px;

        }
        .tips{
          font-size: 12px;
          color:#a2a2a2;
        }
        /*商品规格选择，有带勾号的*/
        .format{
          padding:0 10px;
        }
        .format li:after{
          border-radius: 5px;
        }
        .format li.active{
          color:#327afa;
        }
        .format li.active:after{
          border-color:#327afa;
        }
        .format li.active:before{
          content:"";
          position: absolute;
          width: 0;
          height: 0;
          border-right:22px solid #327afa;
          border-top:15px solid transparent;
          bottom: 0;
          right: 0;
        }
        .format li{
          width: 30%;
          float: left;
          text-align: center;
          border-radius: 8px;
          padding:5px 0;
          margin-bottom: 12px;
        }
        .format li i{
          display: none;
        }
        .format li.active i{
          display: block;
        }
        .format li:nth-of-type(3n+2),.format li:nth-of-type(3n+1){
          margin-right:5%;
        }
        .format .aui-iconfont{
          position: absolute;
          color:#fff !important;
          right: -15px;
          bottom: -8px;
          font-size: 12px !important;
        }
        .addAttr{
          padding:0 10px;
        }
        .addAttr li{
          width: 30%;
          float: left;
          text-align: center;
          border-radius: 8px;
          padding: 5px 0;
        }
        .aui-icon-add{
          color:#000 !important;
        }
        .addMark{
          margin-right: 5px;
        }
        /*自定义可以删除的*/
        .deleIcon:before{
            content:"-";
            color:#fff;
            position: absolute;
            right: -3px;
            top: -5px;
            font-weight: bolder;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #327afa;
            font-size: 18px;
            line-height: 16px;
            text-align: center;
            z-index: 9;
        }
        li.customAttr{
          color:#327afa;
        }
        li.customAttr:after{
          border-color:#327afa;
        }
        .pickerToTop{
            position: absolute;
            bottom: 0;
            z-index: 999;
            width: 100%;
            display: none;
        }
        .toTopAnimate{
            display: block;
        }
        .cancel{
            background: #d7e5ff;
            border-color: #d7e5ff;
            color: #327afa;
            width: 50%;
            float: left;
        }
        .confirm{
            width: 50%;
            float: left;
        }
    </style>
</head>
<body>
<div class="contain">
         <ul class="aui-list-view">
             <li class="aui-list-view-cell">
                 
                     请选择颜色<span class="tips">（必填，最多选20项）</span>
             </li>
             <li class="aui-list-view-cell">
                    <ul class="format colorFormat">
                      <li class="aui-border active" tapmode onclick="changeCheck(this)">
                          <i class="aui-iconfont aui-icon-check"></i>红色
                      </li>
                      <li class="aui-border" tapmode onclick="changeCheck(this)">
                          <i class="aui-iconfont aui-icon-check"></i>红色
                      </li>
                      <li class="aui-border" tapmode onclick="changeCheck(this)">
                          <i class="aui-iconfont aui-icon-check"></i>红色</li>
                      </li>
                      <li class="aui-border" tapmode onclick="changeCheck(this)">
                          <i class="aui-iconfont aui-icon-check"></i>红色
                      </li>
                      <li class="aui-border" tapmode onclick="changeCheck(this)">
                          <i class="aui-iconfont aui-icon-check"></i>红色
                      </li>
                      <li class="aui-border" tapmode onclick="changeCheck(this)">
                          <i class="aui-iconfont aui-icon-check"></i>红色
                      </li>
                      <li class="aui-border customAttr">
                          <span class="deleIcon"  tapmode onclick="deleAttr(this)"></span>红色
                      </li> 
                    </ul>
                    <ul class="addAttr addColor">
                      <li class="aui-border"  data-type="color"   onclick="showPicker('color')">
                          <span class="addMark">+</span>自定义
                      </li>
                    </ul>
             </li>
         </ul>
         <ul class="aui-list-view">
             <li class="aui-list-view-cell">
                 
                     请选择尺寸<span class="tips">（必填，最多选20项）</span>
             </li>
             <li class="aui-list-view-cell">
                    <ul class="format sizeFormat">
                      <li class="aui-border active" tapmode onclick="changeCheck(this)">
                          <i class="aui-iconfont aui-icon-check"></i>XS
                      </li>
                      <li class="aui-border" tapmode onclick="changeCheck(this)">
                          <i class="aui-iconfont aui-icon-check"></i>S
                      </li>
                      <li class="aui-border" tapmode onclick="changeCheck(this)">
                          <i class="aui-iconfont aui-icon-check"></i>M</li>
                      </li>
                        <li class="aui-border" tapmode onclick="changeCheck(this)">
                          <i class="aui-iconfont aui-icon-check"></i>L
                      </li>
                      <li class="aui-border" tapmode onclick="changeCheck(this)">
                          <i class="aui-iconfont aui-icon-check"></i>XL
                      </li>
                      <li class="aui-border" tapmode onclick="changeCheck(this)">
                          <i class="aui-iconfont aui-icon-check"></i>XXL
                      </li>
                      <li class="aui-border customAttr">
                          <span class="deleIcon"   tapmode onclick="deleAttr(this)"></span>XXL
                      </li>    
                    </ul>
                    <ul class="addAttr addSize">
                      <li class="aui-border"  data-type="color"   onclick="showPicker('size')">
                          <span class="addMark">+</span>自定义
                      </li>
                    </ul>
             </li>
         </ul>
     </div> 
      <div class="pickerToTop">
            <ul>
                <li>  
                   <div class="myBtn cancel" tapmode onclick="hidePicker()">取消</div>  
                   <div class="myBtn  confirm" tapmode onclick="setAttr(this)">添加</div>           
                </li>
            </ul>
      </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/myInfo.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/echo.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript">
    var UIInput,inputId,inputValue;
    var firstH;//记录第一次自定义时候的高度，因为弹出键盘时候body高度变化了
    apiready = function () {
        api.parseTapmode();
        UIInput = api.require('UIInput');
    }
    
    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj){
        if($(obj).hasClass("active")){
          $(obj).removeClass("active");
        }else{
          $(obj).addClass("active");
        }        
    }
    function customAttr(type){
        var placeHolder="";
        if(type=="color"){
            placeHolder="请输入自定义颜色";
            $(".myBtn").attr("data-type","color");
        }else{
            placeHolder="请输入自定义尺寸";
            $(".myBtn").attr("data-type","size");
        }
        UIInput.open({
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: 40
            },
            styles: {
                bgColor: '#fff',
                size: 14,
                color: '#000',
                placeholder: {
                    color: '#ccc'
                }
            },
            autoFocus: true,
            maxRows: 1,
            placeholder: placeHolder,
            keyboardType: 'default',
            fixedOn: api.frameName
        }, function(ret, err) {
            if (ret) {
                inputId=ret.id;
            } else {
                
            }
        });
    }
    // 删除自定义的
    function deleAttr(obj){
      $(obj).parent(".customAttr").remove();
    }
    // mui遮罩
    var mask = mui.createMask(hidePicker);
    // 显示遮罩
    function showPicker(type){
        mask.show();
         $(".pickerToTop").addClass("toTopAnimate");
         //t弹出UIInput
        customAttr(type);
       setFrameHeight(1);
    }
    // 关闭遮罩
    function hidePicker(){
        $(".pickerToTop").removeClass("toTopAnimate");
        mask.myclose();
        UIInput.hide({
            id:inputId
        });
        UIInput.closeKeyboard({
            id:inputId
        });
       setFrameHeight(0);
    }
    // 设置属性
    function setAttr(obj){
        var dataType=$(obj).attr("data-type");
        //获取输入框的值
        UIInput.value({
            id:inputId
        },function(ret, err) {
            if (ret) {
                if(ret["msg"]){
                    var html='<li class="aui-border customAttr" ><span class="deleIcon"   tapmode onclick="deleAttr(this)"></span>';
                    html+=ret["msg"];
                    html+='</li>';
                    if(dataType=="color"){
                        $(".colorFormat").append(html);
                    }else{
                        $(".sizeFormat").append(html);
                    }
                    hidePicker();
                }else{
                    api.toast({
                      msg:"请输入",
                      duration:2000
                    })
                }
            } 
        });
    }
    //设置当前页面的高度
    function setFrameHeight(h){
        //设置release_win的页面高度,把页面的确定挤出外面
        var bodyH;
        if(h){
            // 添加自定义状态，隐藏win的确定
            firstH=$('body').height();
            bodyH=$('body').height()+55;
        }else{
            bodyH=firstH;
        }
        api.setFrameAttr({
            name: 'releaseFormat_frm',
            rect: {
                x: 0,
                y: 45,
                w: 'auto',
                h: bodyH
            },
            bounces: true,
            bgColor: '#fff',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
    }
</script>
</html>